<template>
  <div class="bigBox">
    <div><input type="text" /></div>
    <div
      v-if="isShow"
      :style="{ background: msg == '' ? 'cornflowerblue' : '' }"
      @click="verification"
    >
      获取验证码
    </div>
    <div v-if="!isShow">
      <span>{{ count }}</span>秒
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true, // 通过 v-if 判断显示'获取按钮'还是'倒计时'
      count: 0, // 倒计时
      msg: "",
    };
  },
  methods: {
    verification() {
      this.isShow = false;
      this.count = 3;
      var timer = setInterval(() => {
        this.count--;
        if(this.count <= 0) {
            this.isShow = true;
            clearInterval(timer)
        }
      }, 1000)
    },
  },
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;
  align-items: center;
  padding: 20px;
}

.bigBox div:first-child input {
  height: 24px;
  border: none;
  border-radius: 2px;
  border: 1px solid rgb(185, 185, 185);
}

.bigBox div:nth-child(2) {
  width: 80px;
  text-align: center;
  margin-left: 10px;
  background-color: rgb(172, 172, 172);
  color: white;
  padding: 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
</style>
